<script lang="ts">
  import { createEventDispatcher } from "svelte";

  const dispatch = createEventDispatcher();

  // export let type: DeviceType = DeviceType.Blue;
  export let label: string = "";
  export let active: boolean = false;
  export let top: number = 0;
  export let left: number = 0;
  import bgImg from "./icon-blue-bg.png";
  export let icon: string = bgImg;
</script>

<div
  class="absolute h-[230px] w-[182px] bg-device"
  class:active={active ? "active" : ""}
  style:left="{left}px"
  style:top="{top}px"
>
  <div class="text-white text-2xl text-center label">
    {label}
  </div>
  <!-- svelte-ignore a11y-click-events-have-key-events -->
  <div
    class="icon"
    style:background-image="url({icon ? icon : bgImg})"
    on:click={() => dispatch("toggle", { active })}
  />
</div>

<style>
  .bg-device {
    transform: scale(0.6);
    opacity: 0.6;
    @apply bg-center bg-no-repeat bg-contain;
  }

  .bg-device.active {
    opacity: 1;
    transform: scale(0.8);
  }

  .label {
    width: 182px;
    height: 44px;
    line-height: 42px;
    @apply bg-center bg-no-repeat bg-contain;
  }

  /* .bg-device.blue .label {
    background-image: url("./label-blue-bg.png");
  }

  .bg-device.yellow .label {
    background-image: url("./label-yellow-bg.png");
  } */

  .icon {
    /* width: 54px; */
    height: 170px;
    /* margin-left: 64px; */
    /* margin-top: 6px; */
    @apply bg-center bg-no-repeat bg-contain;
  }

  /* .bg-device.blue .icon {
    background-image: url("./icon-blue-bg.png");
  }

  .bg-device.yellow .icon {
    background-image: url("./icon-yellow-bg.png");
  } */
</style>
